<template>
	<view class="page" v-if="checkPermission(['root', 'MEETING:APPROVAL'])">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#3474FF"></uni-segmented-control>
		<view class="list" v-if="current == 0">
			<view class="item" v-for="one in list" :key="one.id">
				<view class="left">
					<image :src="one.photo" mode="widthFix" class="photo"></image>
					<view class="name">{{ one.name }}</view>
					<view class="desc">（发起）</view>
				</view>
				<view class="center">
					<view class="title">{{ one.type }}申请</view>
					<view>日期：{{ one.date }}</view>
					<view>时长：{{ one.hour >= 1 ? one.hour : '小于1' }}小时</view>
					<view>状态：待审批</view>
				</view>
				<view class="right"><button class="btn" @tap="toPage(one.id)">审批</button></view>
			</view>
		</view>
		<view class="list" v-if="current == 1">
			<view class="item" v-for="one in list" :key="one.id" @tap="toPage(one.id)">
				<view class="left">
					<image :src="one.photo" mode="widthFix" class="photo"></image>
					<view class="name">{{ one.name }}</view>
					<view class="desc">（发起）</view>
				</view>
				<view class="center">
					<view class="title">{{ one.type }}申请</view>
					<view class="attr">日期：{{ one.date }}</view>
					<view class="attr">时长：{{ one.hour >= 1 ? one.hour : '小于1' }}小时</view>
					<view class="attr">
						最终结果：
						<text v-if="one.result != null" :class="{ green: one.result == '同意', red: one.result == '不同意' }">{{ one.result }}</text>
					</view>
				</view>
				<view class="right">
					<block>
						<image :src="one.confirmUserPhoto" mode="widthFix" class="icon"></image>
						<view class="name">{{ one.confirmUserName }}</view>
						<view class="desc">（终审）</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			length: 20,
			list: [],
			current: 0,
			items: ['待审批', '已审批']
		};
	},
	onShow: function() {
		this.page = 1;
		this.isLastPage = false;
		this.list = [];
		uni.pageScrollTo({
			scrollTop: '0'
		});
		this.loadData(this);
	},
	onReachBottom: function() {
		if (this.isLastPage) {
			return;
		}
		this.page = this.page + 1;
		this.loadData(this);
	},
	methods: {
		onClickItem(e) {
			if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
				this.page = 1;
				this.list = [];
				this.isLastPage = false;
				this.loadData(this);
			}
		},
		loadData(ref) {
			let type;
			if (ref.current == 0) {
				type = '待审批';
			} else {
				type = '已审批';
			}
			let data = {
				type: type,
				page: ref.page,
				length: ref.length,
				token: uni.getStorageSync('token')
			};
			ref.ajax(ref.url.searchApprovalMeetingByPage, 'POST', data, function(resp) {
				let result = resp.data.result;
				// console.log(result)
				if (result == null || result.length == 0) {
					ref.isLastPage = true;
					ref.page = ref.page - 1;
					if (ref.page > 1) {
						uni.showToast({
							icon: 'none',
							title: '已经到底了'
						});
					}
				}
				for (let i in result) {
					let one = result[i];
					if (one.type == 1) {
						one.type = '线上会议';
					} else {
						one.type = '线下会议';
					}
				}
				ref.list = result;
			});
		},
		toPage: function(id) {
			uni.navigateTo({
				url: "../approval/approval?id="+id,
				fail:function(e){
					console.log(e)
				}
			});
		}
	}
};
</script>

<style lang="less">
@import url('approval_list.less');
</style>
